<script setup>
import { watch } from 'vue'

const { proxy } = getCurrentInstance()

const props = defineProps({
  fileList: {
    type: Array || String,
    default: () => []
  }
})

const downloadFile = (url, fileName, flieId, type) => {
  window.open(url)
}

function frontDownload(fileUrl, fileName) {
  // 发送Ajax请求获取文件二进制数据
  axios({
    url: fileUrl,
    method: 'GET',
    responseType: 'blob',
    data: {}
  }).then(response => {
    var fileURL = window.URL.createObjectURL(new Blob([response]))
    var fileLink = document.createElement('a')
    fileLink.href = fileURL
    fileLink.setAttribute('download', fileName)
    document.body.appendChild(fileLink)
    fileLink.click()
  })
}

const download = val => {
  // frontDownload(val)
  downloadFile(val)
  // proxy.download(val, `${getFileName(val)}${new Date().getTime()}.${val.slice(val.lastIndexOf('.') + 1)}`)
}

// 获取文件名称
function getFileName(name) {
  console.log(name, 'name')
  if (name && name.lastIndexOf('.') > -1) {
    return name.slice(name.lastIndexOf('/') + 1)
  } else {
    return '暂无附件信息，请上传附件'
  }
}

// 获取后缀
const getHou = name => {
  console.log(name, 'name111')
  let type = ''
  if (name && name.lastIndexOf('.') > -1) {
    type = name.slice(name.lastIndexOf('.') + 1, name.length)
    console.log(type)
    if (type == 'pdf') {
      return 'pdf'
    }
    if (type == 'xlsx') {
      return 'xls'
    }
    if (type == 'docx') {
      return 'Word'
    } else {
      return 'wenben1'
    }
  }
}

const arrList = ref([])
// 转义为数组
watch(
  () => props.fileList,
  val => {
    let arr = JSON.parse(val)
    if (Array.isArray(arr)) {
      arrList.value = arr
    } else {
      if (arr?.length > 3) {
        arrList.value = arr.split(',')
      } else {
        arrList.value = []
      }
    }
  },
  {
    deep: true,
    immediate: true
  }
)
</script>

<template>
  <div class="box">
    <div class="box-item flex" v-for="(item, index) in arrList" :key="index" @click="download(item.url)">
      <template v-if="getFileName(item.name) != '暂无附件信息，请上传附件'">
        <el-tooltip class="box-item" effect="dark" :content="getFileName(item.name)" placement="bottom">
          <div class="iconBox">
            <p-icon :icon="getHou(item.name)" fontSize="50" color="#1f95fb" />
            <span class="text">{{ getFileName(item.name) }}</span>
          </div>
        </el-tooltip>
      </template>
      <template v-else> {{ getFileName(item.name) }}</template>
    </div>
    <div v-if="arrList.length <= 0" target="_blank">暂无信息附件</div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  .box-item {
    display: flex;
    padding: 5px 0;
    margin-left: 0.625rem;
    align-items: center;
    border: 1px solid #e4e7ed;
    border-radius: 5px;
    color: black;
    z-index: 999;
    width: 5.125rem;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s;
    &:hover {
      border: 1px solid #1f95fb;
    }
    .iconBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: auto;
    }
    .text {
      width: 5.125rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
